<template>
  <div class="save-wrapper ui pc ">
    <header class="page-header-2">
      {{val.name}} (ID:{{val.id}})
      <button class="ui icon button mini compact" title="修改商品类型名称" @click="showPop">
        <i class="edit icon"></i>
      </button>

      <div class="ui toggle checkbox" v-if="isOld" style="margin-left:20px;">
        <input type="checkbox" v-model="guideMode">
        <label>引导模式</label>
      </div>
    </header>
    <div class="ui tabular menu" v-if="!guideMode">
      <a class="item" :class="{active: activeTag.tab.id == id}" @click="doActiveTag(id)" v-for="{id, text, options=null} in tabs">{{text}}</a>
    </div>
    <div class="ui ordered steps mini" v-else>
      <div class="step" :class="{active: activeTag.tab.id == id}" v-for="{id, text, options=null} in tabs">
        <div class="content">
          <div class="title">{{text}}
            <select class="ui dropdown button" v-if="options">
              <option class="item" :value="value" v-for="{value, text} in options">{{text}}</option>
            </select>
          </div>
        </div>
      </div>
    </div>
    <div class="pc-actions">
      <step-action @sclick="sclick" ref="stepAction" :sconfig="sconfig" v-if="guideMode"></step-action>
      <div class="ui buttons mini" v-else>
        <button class="ui button secondary" @click="sclick({type: 'save'})">保存</button>
        <div class="or"></div>
        <button class="ui button" @click="sclick({type: 'cancel'})">取消</button>
      </div>
    </div>
    <component :is='activeTag.components_name' @onchange="onchange" :data="comData"></component>
    <t-filed :withPop="1==1" title="修改类型" @onsubmit="onsubmit" @oncancel="oncancel" :data="renameField" :active="isshowRename"></t-filed>
  </div>
</template>
<script>
import tool from 'src/util/tool';
import util from '_util/index';
import logic from '_logic';

import stepAction from 'components/common/stepAction';

import type_base from 'components/edit/productType/conf/base'
import type_unit from 'components/edit/productType/conf/unit'
import type_cost_explanation from 'components/edit/productType/conf/cost_explanation'
import type_order_explanation from 'components/edit/productType/conf/order_explanation'
import type_buy_limit  from 'components/edit/productType/conf/buy_limit'
import type_buy_stock  from 'components/edit/productType/conf/buy_stock'

import tFiled from 'components/tunit/tFields'


export default {
  data() {
    return {
      val: null,
      isshowRename: false,
      guideMode: null,
      isOld: false,
      renameField:[
      {
        label: "类型名称",
        show_type: "input",
        value: "",
        name: "name",
	},
	{
		label: "类型图标(建议尺寸：94*94)",
		name: "pic_url",
		show_type: "upload",
		pic_dir:1,
		value:""
	}
      ],
      params:{
        type_id:"",
        attr:[]
      },
      sconfig:{
        pre:{
          disabled:true,
        },
        next:{
          disabled: false
        },
        save:{
          disabled:true
        },
        cancel:{}
      },
      comData:{},
      componentsList:{
        "1": "type_base",
        "2": "type_unit",
        "3": "type_cost_explanation",
        "4": "type_order_explanation",
        "5": "type_buy_limit",
        "6": "type_buy_stock",
      },
      activeTag:{
        index: 0,
        tab: {},
        components_name: ""
      },
      tabStatus:{},
      tabs:[
      {
        id: 1,
        text: "基本信息",

      },
      {
        id: 2,
        text: "规格配置",
      },
      {
        id: 3,
        text: "费用说明",
          // options: [
          // {value: 1, text: "启用"},
          // {value: 0, text: "禁用"}
          // ]
        },
        {
          id: 4,
          text: "预定须知",
          // options: [
          // {value: 1, text: "启用"},
          // {value: 0, text: "禁用"}
          // ]
        },
        {
          id: 5,
          text: "购买限制",
        },
        {
          id: 6,
          text: "商品库存",
        },
        ]
      }
    },
    components:{
      stepAction,
      type_base,
      type_unit,
      type_cost_explanation,
      type_order_explanation,
      type_buy_limit,
      type_buy_stock,
      tFiled,
    },
    watch: {
      "activeTag.index": function(val){
        if(!this.guideMode){
          return;
        }
        this.sconfig.pre.disabled = val == 0;
        this.sconfig.save.disabled = val != this.tabs.length-1;
        this.sconfig.next.disabled = val == this.tabs.length-1;
        this.activeTag.tab = this.tabs[ val ];
        this.activeTag.components_name = this.componentsList[this.activeTag.tab.id];
      },
      "val.name": function(val){
        this.renameField[0].value = val;
      },
      guideMode(val){
        if(val){
          this.$nextTick(() => {
            this.stepInit();
          });
          return;
        }
        this.doActiveTag();
      }
    },
    methods: {
      /*设置步骤*/
      stepInit(){
        this.activeTag.index = 0;
        this.activeTag.tab = this.tabs[ 0 ];
        this.activeTag.components_name = this.componentsList[ this.tabs[ 0 ].id ];
        this.tabs.forEach((_, i) => {
          this.tabStatus[ i+1 ] = i<10;
        });
      },
      /* component 数据回传 */
      onchange({name, data}){
        let attr_pos=['attrList', 'unitList'];
        this.comData[name] = data;
        if(~ attr_pos.indexOf(name)){
          this.params.attr[ attr_pos.indexOf(name) ] = data;
        }
      },
      /* 控制步骤 */
      sclick({type=""}){
        if(type == "cancel"){
          this.$router.go(-1);
          return;
        }
        if(type == "save"){
          this.onSubmit();
          return;
        }
        if(type == "pre"){
          this.activeTag.index --;
        }
        if(~[1].indexOf( this.activeTag.index ) && !(this.params.attr[ this.activeTag.index ] && this.params.attr[ this.activeTag.index ].length>0)){
          util.showMsg(this, 'error', `请完成${this.tabs[ this.activeTag.index ].text}`)
          return;
        }
        if(type == "next"){
          this.activeTag.index ++;
        }
      },
      onSubmit() {

        let url = tool.getApi(this,'ProductType', 'bindAttr');
        let _this = this;

        util.http.SR(this, url, this.params, '操作成功',(rs)=>{
          let eventVue = util.store.get(this,'eventVue');
          _this.val = {};
          _this.$router.push({path: '/page/list', query:{ctl:'ProductType', title: "商品类型"}});
          eventVue.$emit('afterAdd')
        });

      },
      showPop(){
        this.isshowRename = true;
      },
      hidePop(){
        this.isshowRename = false;
      },
      oncancel(){
        this.hidePop();
      },
      onsubmit(fields){
        if(!fields.name){
          util.showMsg(this, 'error', `请完成请输入类型名称`)
          return
        }
        util.showConfirm(this, () => {
          this.doRename(fields)
        },{content:'确认修改当前类型名称吗？'});
      },
      doRename(fields){
        let url = tool.getApi(this,'ProductType', 'update');
        let params = {};
        Object.assign(params, this.$store.state.global.editVo, fields);
        util.http.SR(this, url, params, `类型名成功修改成${fields.name}`, (rs) => {
          this.val.name = params.name;
          this.hidePop();
        });
      },
      doActiveTag(id=1){
        this.activeTag.components_name = this.componentsList[id];
        this.activeTag.tab = {id: id};
      }
    },
    computed: {
      titleType() {
        return logic.edit.get_titleType(this);
      },
      ctl() {
        return this.$route.query.ctl;
      },
    },
    props: [],
    created() {
      this.val=util.store.get(this, 'editVo');
      this.isOld = !!(this.val.attr[2]);
      this.guideMode = !this.isOld;
	  this.renameField[0].value = this.val.name;
      this.renameField[1].value = this.val.pic_url;
      this.params.type_id = this.val.id;
      if(this.val.attr){
        if(this.val.attr[1]){
          this.comData.attrList = this.val.attr[1];
          this.params.attr[0] = this.val.attr[1];
        }
        if(this.val.attr[2]){
          this.comData.unitList = this.val.attr[2];
          this.params.attr[1] = this.val.attr[2];
        }
      }
      // this.$refs.step.
    },
  }
  </script>
  <style rel="stylesheet/less" scoped lang="less">
  .page-header-2{
    font-size: 16px;
    padding: 10px;
    border-bottom: 1px solid rgba(34,36,38,.15)

  }
  .pc{
    padding-bottom: 60px;
    &-actions{
      position: fixed;
      left: 210px;
      right: 20px;
      bottom: 10px;
      padding-top: 10px;
      z-index: 5;
      background: linear-gradient(to top, rgba(255,255,255, 1) 0%, rgba(255,255,255,0) 100%);
    }
    &-block{
      &-title{
        font-size: 14px;
        height: 26px;
        line-height: 26px;
        margin-bottom: 10px;
      }
    }
  }
  </style>
